Skip to main content

How to Build a Lead Capture Form with NoCode-X - Step-by-Step Tutorial

Table of Contents​

Introduction​

This guide demonstrates how to create a lead capture form in NoCode-X. The tutorial covers building a multi-step form, adding conditional logic, saving data to a database, and ensuring responsiveness for all screen sizes.

Video Tutorial​

Use Cases​

  • Capturing leads for marketing campaigns.
  • Collecting user feedback or survey responses.
  • Building multi-step forms with conditional logic.
  • Storing and processing form submissions in a database.

Prerequisites​

  • A NoCode-X workspace with access to data formats and actions.
  • Basic understanding of NoCode-X page creation and navigation.
  • A clear idea of the questions and data you want to capture.

Quick Start Guide​

  1. Create the Form Page:

    • Add a vertical list for questions and a navigation bar.
    • Include a "Next" button to move between steps.

  2. Add Conditional Logic:

    • Use triggers to show or hide fields based on user input.

  3. Save Data to the Database:

    • Create a data format to store form responses.
    • Use actions to save data when the user clicks "Next" or "Submit."

  4. Test and Debug:

    • Test the form for responsiveness and functionality.

Detailed Implementation Steps​

1. Creating the Form Page (Timestamp: 0:21-1:59)​

  • Add a vertical list to the page and include questions, a logo, and a navigation bar.
  • Use the navigation plugin to create a top navigation bar.
// Example: Page layout setup
const page = {
    title: "Lead Capture Form",
    elements: [
        { type: "logo", id: "logo" },
        { type: "verticalList", id: "questionsList" },
        { type: "button", id: "nextButton", label: "Next" }
    ]
};

2. Adding Conditional Logic (Timestamp: 2:00-3:29)​

  • Use triggers to show or hide fields based on user input.
// Example: Conditional logic for showing a field
if (selectedOption === "Other") {
    showElement("otherInputField");
} else {
    hideElement("otherInputField");
}

3. Saving Data to the Database (Timestamp: 5:02-6:00)​

  • Create a data format to store form responses.
  • Use actions to save data when the user clicks "Next" or "Submit."
// Example: Data format for form responses
const formData = {
    requestId: "unique-id",
    question1: "Answer 1",
    question2: "Answer 2",
    question3: "Answer 3"
};

// Example: Save data action
saveToDatabase("formResponses", formData);

4. Adding Responsiveness (Timestamp: 10:00-10:35)​

  • Adjust the layout for different screen sizes using NoCode-X's responsive design tools.
// Example: Responsive layout adjustments
if (screenSize === "tablet") {
    setElementSize("questionsList", { width: "12-grid", height: "auto" });
} else if (screenSize === "desktop") {
    setElementSize("questionsList", { width: "10-grid", height: "auto" });
}

5. Adding a Thank You Page (Timestamp: 7:00-7:59)​

  • Create a success page with a thank-you message and animation.
// Example: Thank you page setup
const successPage = {
    title: "Thank You!",
    elements: [
        { type: "text", id: "thankYouMessage", content: "Thank you for your submission!" },
        { type: "animation", id: "thankYouAnimation", assetLink: "animation-link" }
    ]
};

Advanced Features​

1. Tracking Form Submissions (Timestamp: 12:00-12:11)​

  • Use JavaScript or HTML elements to add tracking scripts for analytics.
// Example: Adding a tracking script
const trackingScript = `
    <script>
        // Tracking logic here
    </script>
`;
addHtmlElement("trackingScript", trackingScript);

2. Using Data Format Triggers (Timestamp: 13:01-13:14)​

  • Execute logic whenever a new form submission is created or updated.
// Example: Data format trigger
onDataCreated("formResponses", (data) => {
    sendNotification("New form submission received", data);
});

3. Adding Background Animations (Timestamp: 11:01-11:47)​

  • Use the HTML element to add a video or animation as the background.
<!-- Example: Background video -->
<video autoplay muted loop id="backgroundVideo">
    <source src="background-video.mp4" type="video/mp4">
</video>

References​